<template>
	<el-container v-loading="loading">
		<!-- 头部导航 -->
		<el-header class="Home-header">
			<el-row type="flex" justify="end" style="height: 100%;">

				<!-- 用户头像 -->
				<el-col :span="1" :xs="4" style="display: flex;align-items: center;">
					<el-avatar :size="40" :src="circleUrl"></el-avatar>
				</el-col>

				<!-- 用户名称及下拉选项 -->
				<el-col :span="5" :xs="12">

					<el-dropdown @command="toNode" style="height: 100%;">

						<span class="el-dropdown-link" style="display: flex;height: 100%;align-items: center;">
							Welcome To {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>

						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command='RePassword' icon="el-icon-warning">Change Password
							</el-dropdown-item>
							<el-dropdown-item command='toNode' icon="el-icon-error">Exit</el-dropdown-item>
						</el-dropdown-menu>

					</el-dropdown>

				</el-col>

			</el-row>
		</el-header>

		<!-- 主体 -->
		<el-container class="Home-container2">

			<!-- 左侧导航栏 -->
			<el-menu ref="menu" default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
				:collapse="isCollapse">
				<template v-for="item in AsideNavigation">

					<el-menu-item v-if="item.type == 'menu'" @click="AsidesClick(item.puch)" :index="item.index">
						<i :class="item.icon"></i>
						<span slot="title">{{item.title}}</span>
					</el-menu-item>

					<el-submenu v-if="item.type == 'sub'" :index="item.index">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{item.title}}</span>
						</template>
						<el-menu-item-group v-for="(items,index) in item.list" :key="index">
							<el-menu-item @click="AsidesClick(items.puch)" :index="items.index">
								<i :class="items.icon"></i>
								{{items.title}}
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>

				</template>
			</el-menu>

			<!-- 内容区 -->
			<el-container class="Home-container3">
				<el-main>

					<!-- 左侧菜单折叠按钮组 -->
					<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
						<el-radio-button :label="false">Spread</el-radio-button>
						<el-radio-button :label="true">Fold</el-radio-button>
					</el-radio-group>

					<!-- 下划线 -->
					<el-divider class="Home-el-divider"></el-divider>
					<!-- 路由控制 -->
					<router-view @setLoading='setLoading'></router-view>

				</el-main>
			</el-container>

		</el-container>

	</el-container>

</template>

<script>
	var that
	export default {
		data() {
			return {
				username: 'username',
				loading: false,
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
				isCollapse: true,
				// 路由菜单
				AsideNavigation: [
					{
						index: '1',
						type: 'menu',
						icon: 'el-icon-s-home',
						title: 'Console',
						puch: '/Console/index'
					},
					{
						index: '2',
						type: 'sub',
						icon: 'el-icon-user-solid',
						title: 'Personnel',
						list: [
							{
								index: '2-1',
								icon: 'el-icon-s-custom',
								title: 'Manage',
								puch: '/Personnel/index'
							},
							{
								index: '2-2',
								icon: 'el-icon-user-solid',
								title: 'User',
								puch: '/Personnel/User'
							},
						]
					},
					{
						index: '3',
						type: 'sub',
						icon: 'el-icon-s-shop',
						title: 'Auction',
						list: [
							{
								index: '3-1',
								icon: 'el-icon-s-promotion',
								title: 'Auction Item',
								puch: '/Auction/AuctionItem'
							},
							{
								index: '3-2',
								icon: 'el-icon-s-goods',
								title: 'Auction Spell',
								puch: '/Auction/AuctionSpell'
							},
						]
					},
					{
						index: '4',
						type: 'sub',
						icon: 'el-icon-s-tools',
						title: 'System',
						list: [
							{
								index: '4-1',
								icon: 'el-icon-s-platform',
								title: 'Config',
								puch: '/System/Config'
							},
							{
								index: '4-2',
								icon: 'el-icon-s-check',
								title: 'Personal Center',
								puch: '/System/PersonalCenter'
							},
						]
					},
				]
			}
		},
		mounted() {

		},
		methods: {
			menu() {

			},
			// 控制加载层方法以及暴露给子路由
			setLoading() {
				this.loading = !this.loading
			},

			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},

			//路由跳转
			AsidesClick(item) {
				if (this.$route.path != item) {
					this.$router.push(item)
				}
			},
			// 导航选择器
			toNode(res) {
				switch (res) {
					// 返回登录页
					case 'toNode':
						localStorage.removeItem('token')
						localStorage.removeItem('ManbePassword')
						this.$router.push('/Home/Login')
						break
					case 'RePassword':
						break
				}
			}
		}
	};
</script>


<style scoped lang="scss">
	.Home-header {
		background: rgba(255, 255, 255, 1.0);
		box-shadow: 0 0px 6px 4px #c7c7c7;
		position: relative;
		z-index: 2000;
	}

	.Home-container2 {
		.Home-aside {
			height: calc(100vh - 60px);
		}

		.el-menu-vertical-demo:not(.el-menu--collapse) {
			width: 200px;
			min-height: 400px;
		}

		.Home-container3 {
			height: calc(100vh - 60px);

			.Home-el-divider {
				margin: 0px;
				margin-bottom: 10px;
			}
		}
	}
</style>
